<template>
  <div
    class="top-container"
    :style="{
      background: type == 'index' ? '' : '#ffff',
      boxShadow:
        type == 'index' ? 'none' : '0px 2px 6px 0px rgba(205,207,210,0.27)',
    }"
  >
    <img class="logo" :src="type == 'index' ? logo : logo2" alt=""  @click="goIndex"/>
    <div class="avatar">
      <div class="order-btn" @click="queryOrder">
        <img :src="type == 'index' ? imgUrl : ffImgUrl" alt="" />
        <span :style="{ color: type == 'index' ? '#fff' : '#3D3D3D' }"
          >我的订单</span
        >
      </div>
      <img
        class="avatar-img"
        :src="type == 'index' ? avatar : avatar2"
        alt=""
      />
    </div>
  </div>
  <el-drawer
    v-model="drawer"
    title="我的订单"
    :direction="direction"
    :with-header="false"
    class="order-drawer"
    @close="closeDrawer"
  >
    <div class="header">
      <img src="../../assets/img/close.png" alt="" @click="closeDrawer" />
      <span class="title">我的订单</span>
      <div class="head-tab">
        <div
          class="item"
          v-for="(item, index) in tabs"
          :key="index"
          @click="checktab(index)"
          :class="{ active: tabIndex == index }"
        >
          {{ item }}({{ index }})
        </div>
      </div>
    </div>
    <div class="content">
      <div class="scroll">
        <TicketCard  v-for="item,index in 20" :key="index"/>
      </div>
    </div>
  </el-drawer>
</template>
<script setup>
import imgUrl from "../../assets/img/order.png";
import ffImgUrl from "../../assets/img/order2.png";
import avatar from "../../assets/img/avatar.png";
import avatar2 from "../../assets/img/avatar2.png";
import logo from "../../assets/img/logo.png";
import logo2 from "../../assets/img/logo2.png";
import TicketCard from "./TicketCard.vue";
import mitter from '@/utils/mitter.js'
import { useRouter } from "vue-router";

let { type } = defineProps(["type"]);
let drawer = ref(false);
let tabs = ref(["待使用", "未支付", "已完成"]);
const direction = ref("rtl");
let tabIndex = ref(0);

let router=useRouter()
mitter.on('queryOrder', () => {
  queryOrder()
})

function checktab(index) {
  tabIndex.value = index;
}

function queryOrder() {
  drawer.value = true;
}
function closeDrawer() {
  tabIndex.value = 0;
  drawer.value = false;
}

function goIndex(){
  router.push('/');
}
</script>
<style scoped lang="scss">
.top-container {
  width: 100vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  top: 0;
  .logo {
    width: 163px;
    height: 32px;
    margin-left: 40px;
    cursor: pointer;
  }

  .avatar {
    height: 60px;
    display: flex;
    align-items: center;
    cursor: pointer;
    margin-right: 59px;
    .order-btn {
      width: 120px;
      height: 35px;
      display: flex;
      align-items: center;
      border: 1px solid #d0dceb;
      opacity: 0.7;
      border-radius: 21px;
      display: flex;
      justify-content: center;
      align-items: center;

      span {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 16px;
        color: #ffffff;
        line-height: 18px;
        text-align: center;
        font-style: normal;
        margin-left: 10px;

        &:hover {
          color: #ff6600 !important;
        }
      }
      img {
        width: 15px;
        height: 20px;
      }
    }

    .avatar-img {
      margin-left: 10px;
      width: 35px;
      height: 35px;
    }
  }
}

.order-drawer {
  .header {
    width: 100%;
    height: 126px;
    background: #ffffff;
    box-shadow: 0px 1px 0px 0px #d9dde1;
    img {
      position: absolute;
      right: 12px;
      top: 12px;
      width: 20px;
      height: 20px;
      cursor: pointer;
    }
    .title {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 20px;
      color: #000000;
      line-height: 26px;
      text-align: left;
      font-style: normal;
      position: absolute;
      left: 20px;
      top: 20px;
    }
    .head-tab {
      width: 250px;
      height: 35px;
      position: absolute;
      top: 67px;
      left: 20px;
      border-radius: 4px;
      display: flex;

      .item {
        width: 90px;
        height: 35px;
        border-radius: 4px;
        border: 1px solid #d9d9d9;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
      }
    }
  }
  .content {
    background: #f7f8f9;
    margin-top: 1px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;

    .scroll {
      margin-top: -13px;
      height:100vh;
      overflow-y: auto; /* 允许垂直方向上的滚动 */
      box-sizing: border-box; /* 包含padding和border在内的高度计算 */
      padding-bottom: 20vh; /* 如果底部有内容被遮挡，增加一些额外的空间 */
      &::-webkit-scrollbar {
        display: none; /* Chrome, Safari and Opera */
      }
    }
  }
}
.active {
  border: 1.2px solid #005ff9 !important;
  color: #005ff9 !important;
}
</style>
